<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useTDataManagement } from "./hooks/TDataManagement"
const {
  columns,
  dataList,
  loading,
  PINumber,
  statement,
  stubimfrom,
  btnloading,
  DialogVisible,
  SendDataName,
  pagination,
  SendDataDate,
  dataLists,
  paginations,
  loadings,
  SendData,
  SendDatas,
  close_from,
  SendAccredit,
  CloseAccredit,
  handleSizeChange,
  handleSizeChanges,
  handleCurrentChanges,
  handleCurrentChange
} = useTDataManagement()
</script>

<template>
  <div class="main">
    <!-- 投保人-数据管理 -->
    <el-tabs type="border-card">
      <el-tab-pane label="OBD设备数据">
        <PureTableBar title="" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
              size="small" :data="dataList" max-height="600" :columns="columns" :checkList="checkList"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <!-- 弹出授权声明 -->
                <el-button type='primary' size="small" text @click="SendData(row)" :disabled="!(row.getCar === 3)">
                  {{
                    row.getCar == null ? '未申请' :
                    row.getCar == 0 ? '未申请' :
                      row.getCar == 1 ? '已申请' :
                        row.getCar == 2 ? '获取授权' :
                          row.getCar == 3 ? '发出授权声明' :
                            row.getCar == 4 ? '数据授权' :
                              row.getCar == 5 ? '获取授权声明' : '获取OBD数据'
                  }}
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="健康数据">
        <PureTableBar title="" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loadings"
              size="small" :data="dataLists" max-height="600" :columns="columns" :checkList="checkList"
              @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :pagination="paginations"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="SendDatas(row)" :disabled="!(row.getHealth === 1)">
                  {{
                    row.getHealth == null ? '未申请' :
                    row.getHealth == 0 ? '未申请' :
                      row.getHealth == 1 ? '数据授权' :
                        row.getHealth == 2 ? '已授权' : '发送定价'
                  }}
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>
    <!-- 授权声明 -->

    <ReDialog :width="650" :height="510" :models="statement" @Closes="CloseAccredit()">
      <template #header>
        <h2 style="text-align: center;">授权声明</h2>
      </template>
      <template #main>
        <div class="statement">
          <p class="statement_op">
            [授权方名称：{{ SendDataName.piApplicant }} ]（以下简称“授权方”）授权 [授权对象名称：保险公司]（以下简称“授权对象”）处理授权方持有的OBD设备（以下简称“设备”）的数据。
          </p>
          <h3>一、授权范围</h3>
          <dl>
            <dt>授权方授权授权对象在限定时间内处理设备所产生的以下数据类型：</dt>
            <dd>1.车辆故障码；</dd>
            <dd>2.实时监测车辆行驶信息；</dd>
            <dd>3.其他与设备相关的数据。</dd>
            <dd>授权对象不得将授权信息泄露、复制或交给第三方，不得将处理后的数据用于非法用途。</dd>
          </dl>
          <h3>二、授权方式</h3>
          <dd>授权方授权方式为书面形式。授权对象需在授权范围内合规使用数据。</dd>
          <h3>三、保密条款</h3>
          <dd>授权对象需对授权信息进行保密，不得复制、泄露或透露给第三方。</dd>
          <h3>四、违约条款</h3>
          <dl>
            <dd>1.如果授权对象违反授权协议或未履行其义务，授权方有权取消授权</dd>
            <dd>2.如果授权对象造成损失或侵犯他人权益，授权对象需承担相应法律责任。</dd>
            <dd>3.本授权声明自签署日起生效，有效期为 1年，如需续签，请另行申请。</dd>
          </dl>
          <dl class="statement_name">
            <dd>授权时间：<el-date-picker v-model="SendDataDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </dd>
            <dd>授权方：{{ SendDataName.piApplicant }}</dd>
          </dl>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="SendAccredit()" :loading="btnloading"> 确定 </el-button>
        <el-button @click="CloseAccredit()"> 取消 </el-button>
      </template>
    </ReDialog>

  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.list_hei) {
  .flex {
    display: none;
  }
}

:deep(.pure-table) {
  height: 100%;
}

:deep(.el-dialog__footer) {
  text-align: center;
}


:deep(.stubimdialog) {
  border-radius: 10px;
}

.statement_dialog {
  border-radius: 0px !important;
}

.statement {
  text-align: left;
  font-size: 14px;
  padding: 0 10px;

  dd {
    line-height: 24px;
    text-indent: 2rem;
  }
}

.statement_name {
  width: 90%;
  text-align: right;
}
</style>
